<template>
  <div class="bg">
    <div class="userdetail">
      <div>
        <div class="user_img">
          <img
            src="@/assets/pic.jpg"
            alt=""
          >
        </div>
        <div class="user_edit">
          <div>
            <p>
              <span>0</span>
              <span class="user_text">粉丝</span>
            </p>
            <span class="split"></span>
            <p>
              <span>0</span>
              <span class="user_text">关注</span>
            </p>
            <span class="split"></span>
            <p>
              <span>0</span>
              <span class="user_text">获赞</span>
            </p>
          </div>
          <div class="user_editBtn">
            编辑资料
          </div>
        </div>
      </div>
      <div class="part2">
        <p class="username">鲤鱼与驴呀
          <span>
            <van-icon
              name="gem"
              class="gem"
            /></span>
        </p>
        <p>这个人很神秘，什么都没有写</p>
        <span
          class="toggle"
          @click="toggleClick"
        >{{toggle?'收起':'展开'}}</span>
        <div class="clear"></div>
        <p
          class="uid"
          v-if="toggle"
        >uid:356937323</p>
      </div>

    </div>
    <div class="tag_top">
      <div class="bb">
        <div class="tag">
          <span :class="{on:show==1}" value='1' @click="tagClick(1)">动态</span>
          <span :class="{on:show==2}" value='2' @click="tagClick(2)">视频</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggle: true,
      show:1,
    };
  },
  created() {},
  mounted() {},
  methods: {
    toggleClick() {
      this.toggle ? (this.toggle = false) : (this.toggle = true);
    },
    tagClick(e){
      this.show=e
    }
  }
};
</script>

<style scoped lang="less">
.bg {
  background-color: #fff;
  .userdetail {
    padding: 0 3.3333vw;
    > div:nth-child(1) {
      display: flex;
    }
    .user_img {
      height: 27.7778vw;
      width: 27.7778vw;
      margin-right: 5.5556vw;
      img {
        width: 80%;
        // height: 100%;
        border-radius: 50%;
        margin-top: -2.7778vw;
      }
    }
    .user_edit {
      vertical-align: middle;
      flex: 1;
      div:nth-child(1) {
        display: flex;
        p {
          margin: 2.7778vw 0;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-size: 3.6111vw;
          .user_text {
            color: #aaa;
          }
        }
        .split {
          width: 0.2778vw;
          height: 4.7777vw;
          background-color: #f4f4f4;
          display: inline-block;
          margin-top: 2.6666vw;
        }
      }
      .user_editBtn {
        border: 1px solid #fb7299;
        text-align: center;
        padding: 1.3889vw;
        border-radius: 0.8333vw;
        color: #fb7299;
        font-size: 3.8889vw;
      }
    }
    .part2 {
      padding: 3.2vw 0;
      .username {
        color: #212121;
        font-size: 4.8vw;
        .gem {
          font-size: 3.8889vw;
          color: #1389bf;
          vertical-align: middle;
        }
      }
      p:nth-child(2) {
        color: #999;
        font-size: 3.46667vw;
        margin-top: 2.2222vw;
        margin-bottom: 0.5556vw;
        display: inline-block;
        float: left;
      }
      .uid {
        display: inline-block;
        color: #505050;
        font-size: 2.7778vw;
        background: #f4f4f4;
      }
      .toggle {
        float: right;
        margin-top: 2.2222vw;
        margin-bottom: 0.5556vw;
        color: #999;
        font-size: 3.46667vw;
        color: #1389bf;
      }
    }
  }
  .tag_top {
   height: 60px;
    .bb {
       border-top: 1px solid #f4f4f4;
       border-bottom: 1px solid #f4f4f4;
    }
    .tag{
       margin-left: 3.3333vw;
       padding: 2.7778vw 0;
       span{
         display: inline-block;
         font-size: 3.4688vw;
         color: #757575;
         width: 14.6667vw;
       }
       .on{
         color: #fb7299;
       }
    }
  }
}
</style>
